<template>
  <div class>
    <!-- 自定义导航栏 -->
    <gh-navbar id="navbar" :showback="true" title="系统消息" />
    <div class="system">
      <scroll-view
        :scroll-top="scrollTop"
        :scroll-y="true"
        id="scrollview"
        :style="mainStyle"
        @scrolltolower="handleScrollToLower"
        @scrolltoupper="handleScrollToUpper"
        @scroll="handleScroll"
      >
        <div class="main">
          <div class="item" v-for="item in messages" :key="item.id">
            <div class="time">{{item.time}}</div>
            <div class="content-box">
              <div class="item-content">{{item.arr.content}}</div>
            </div>
          </div>
        </div>
      </scroll-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      messages: [],
      scrollViewHeight: 0, // scroll-view组件的高度
      query: null, // 节点信息
      windowHeight: 0, // 屏幕高度
      scrollTop: 0,
      old: {
        scrollTop: 0
      },
      userScorll: false, // 判断用户下拉，不滚动底部  this.userScorll = true 代表用户下拉
      platform: "", // 平台
      recordLength: 0, //  请求的聊天记录的数组长度
      page: 1, // 数据页码数
      upperLoading: false, // 获取聊天记录的节流flag
      uid: 0,
    };
  },
  computed: {
    mainStyle() {
      return `height:calc(${this.scrollViewHeight}px - 50rpx);`;
    }
  },
  watch: {
    "old.scrollTop"(newVal, oldVal) {
      // 判断用户下拉，不滚动底部  this.userScorll = true 代表用户下拉
      newVal < oldVal ? (this.userScorll = true) : (this.userScorll = false);
    }
  },
  onShow() {
    const that = this;
    const uid = uni.getStorageSync("uid");
    this.uid = uid
    that.messages = []
    // 系统消息
    let systemData = {
      type: "system_news",
      uid,
      identity: this.$store.state.identity,
      page: that.page,
      psize: 20
    };
    this.$store.dispatch("sendMsg", systemData);
    uni.onSocketMessage(function(res) {
      const resData = JSON.parse(res.data);
      if (resData.type == "system_news") {
        console.log(resData);
        // that.messages = that.messages.concat(resData.list);
        that.messages = resData.list.concat(that.messages);
        that.recordLength = resData.list.length;
        that.upperLoading = false
        uni.hideLoading();
      }
    });
  },
  created() {
    const that = this;
    uni.getSystemInfo({
      success: function(res) {
        // 获取屏幕高度
        that.windowHeight = res.windowHeight;
        that.platform = res.platform;
        if (res.platform == "ios") {
          that.textareaPadding = 5;
        } else if (res.platform == "android") {
          that.textareaPadding = 25;
        } else {
          that.textareaPadding = 15;
        }
      }
    });
  },
  mounted() {
    this.scrollViewHeight = this.windowHeight - this.$store.state.navbarHeight;
    this.scrollToBottom();
  },

  methods: {
    scrollToBottom() {
      const that = this;
      return new Promise((resolve, reject) => {
        if (this.userScorll) {
          reject("用户在滑动");
        }
        that.scrollTop = that.old.scrollTop;
        try {
          setTimeout(() => {
            let query = uni.createSelectorQuery().in(that);
            query.select(".main").boundingClientRect();
            query.exec(res => {
              // let top = that.windowHeight + res[2].height + res[3].height
              let top = that.windowHeight + res[0].height;
              console.log(top);
              this.$nextTick(function() {
                that.scrollTop = top;
                that.userScorll = false;
                resolve(true);
              });
            });
          }, 500);
        } catch (error) {
          reject();
        }
      });
    },
    handleScrollToLower(e) {
      // 滚动到底部的时候，代表用户没有下拉看以前的信息，接受信息滚动到底
      this.userScorll = false;
    },
    handleScroll(e) {
      this.old.scrollTop = e.detail.scrollTop;
    },
    handleScrollToUpper() {
      console.log(11);
      if (this.recordLength < 20) return;
      if (this.upperLoading) return;
      this.upperLoading = true;
      uni.showLoading({
        title: "加载中"
      });
      this.page++;
      // 系统消息
      let systemData = {
        type: "system_news",
        uid: this.uid,
        identity: this.$store.state.identity,
        page: this.page,
        psize: 20
      };
      this.$store.dispatch("sendMsg", systemData);
    }
  }
};
</script>
<style lang='less' scoped>
@import url("../common/util.less");
.system {
  padding: 25rpx 0;
  .main {
    padding: 0 25rpx;
  }
  .item {
    .time {
      font-size: 24rpx;
      color: @font-color;
      padding: 0 0 25rpx;
      text-align: center;
    }
    .content-box {
      .item-content {
        padding: 28rpx 20rpx;
        margin-bottom: 28rpx;
        font-size: 30rpx;
        color: @deep-color;
        border-radius: 5rpx;
        background-color: #eaf0fe;
      }
    }
  }
}
</style>